<script setup>
const props = defineProps({
  href: {
    type: String,
    default: '#'
  },
  horizontalPadding: {
    type: String,
    default: 'pr-4 pl-3'
  },
  verticalPadding: {
    type: String,
    default: 'py-2'
  },
  linkColor: {
    type: String,
    default: 'text-gray-700 dark:text-gray-400'
  },
  hoverLinkColor: {
    type: String,
    default: 'lg:hover:text-blue-700 dark:hover:text-white'
  },
  additionalClasses: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: 'Company'
  }
});

const classString = `block ${props.verticalPadding} ${props.horizontalPadding} ${props.linkColor} border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 ${props.hoverLinkColor} lg:p-0 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700 ${props.additionalClasses}`;
</script>

<template>
  <a :href="props.href" :class="classString">
      {{ props.text }}</a>
</template>

<style scoped>

</style>
